<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :title="title"
    :visible="visible"
    :width="1200"
    cancelText="关闭"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleOk">
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <a-divider orientation="left" style="font-weight: 400;margin-top: 0px;">基础信息</a-divider>
    <a-form-model :label-col=" {
        xs: { span: 16 },
        sm: { span: 6 }
      }" :model="form" :wrapper-col="{
        xs: { span: 24 },
        sm: { span: 14 }
      }">
      <a-col :md="8" :sm="24">
        <a-form-model-item label="经销商编码">
          <span>{{ form.clientCode }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="经销商名称">
          <span>{{ form.clientName }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="经销商类型">
          <span>{{ form.clientTypeStr }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="提交时间">
          <span>{{ form.createTime }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="人员姓名">
          <span>{{ form.createName }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="职位名称">
          <span>{{ form.visitPosName }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="所属组织">
          <span>{{ form.orgName }}</span>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <a-divider orientation="left" style="font-weight: 400;margin-top: 0px;">拜访总汇</a-divider>
    <a-form-model :label-col="labelCol" :model="forms" :wrapper-col="wrapperCol">
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否进店打卡">
          <span>{{ forms.visitInStatus ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否陈列检查">
          <span>{{ forms.displayType ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否库存盘点">
          <span>{{ forms.tockType ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否竞品采集">
          <span>{{ forms.visitCollectStatus ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否销量采集">
          <span>{{ forms.visitSalesStatus ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否资产管理">
          <span>{{ forms.visitAssetsStatus ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否知识宣讲">
          <span>{{ forms.visitKnowledgeStatus ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否建议反馈">
          <span>{{ forms.feedbackType ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="是否离店打卡">
          <span>{{ forms.visitOutStatus ? '是' : '否' }}</span>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <a-divider orientation="left" style="font-weight: 600;margin-top: 0px;"></a-divider>
    <a-tabs ref="tabs" :active-key="activekey" defaultActiveKey="1" @change="cutType">
      <a-tab-pane v-if="forms.visitInStatus" key="1" tab="进店打卡"></a-tab-pane>
      <a-tab-pane v-if="forms.displayType" key="2" tab="陈列执行"></a-tab-pane>
      <a-tab-pane v-if="forms.tockType" key="3" tab="库存盘点"></a-tab-pane>
      <a-tab-pane v-if="forms.visitCollectStatus" key="4" tab="竞品采集"></a-tab-pane>
      <a-tab-pane v-if="forms.visitSalesStatus" key="5" tab="销量采集"></a-tab-pane>
      <a-tab-pane v-if="forms.visitAssetsStatus" key="6" tab="资产管理"></a-tab-pane>
      <a-tab-pane v-if="forms.visitKnowledgeStatus" key="7" tab="知识宣讲"></a-tab-pane>
      <a-tab-pane v-if="forms.feedbackType" key="8" tab="建议反馈"></a-tab-pane>
      <a-tab-pane v-if="forms.visitOutStatus" key="9" tab="离店打卡"></a-tab-pane>
    </a-tabs>
    <!--   进店打卡 -->
    <a-form-model v-if='key=="1"' :label-col="labelCol" :model="form3" :wrapper-col="wrapperCol">
      <a-col :md="12" :sm="24">
        <a-form-model-item label="进店时间">
          <span>{{ form3.inPunchDetail.createTime }}</span>
        </a-form-model-item>
      </a-col>
      <!--      <a-col :md='12' :sm='24'>-->
      <!--        <a-form-model-item label='进店地址'>-->
      <!--          <span>111</span>-->
      <!--        </a-form-model-item>-->
      <!--      </a-col>-->
      <a-col :md="12" :sm="24">
        <a-form-model-item label="进店打卡图片">
          <!--          <j-image-upload v-model='form3.inPunchDetail.inUrl[0]' :disabled='disableSubmit' class='avatar-uploader'-->
          <!--                          text='上传'></j-image-upload>-->
          <viewer :images="form3.inPunchDetail.inUrl">
            <a-avatar v-for="(url,uidx) in form3.inPunchDetail.inUrl" :key="uidx" :src="url"
                      shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
          </viewer>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--    离店检查-->
    <a-form-model v-if='key=="2"' :label-col="{
        xs: { span: 16 },
        sm: { span: 12 }
      }" :modal="form4" :wrapper-col="wrapperCol">
      <a-col :md="12" :sm="24">
        <a-form-model-item label="陈列数量占比" style="margin-left: -150px">
          <span>{{ form4.displayDetail.displayMarket }}%</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="A类位置" style="margin-left: -150px">
          <span>{{ form4.displayDetail.whether==1?'是':'否' }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="门店货架陈列全貌" style="margin-left: -150px">
          <viewer :images="form4.displayDetail.urlList">
            <a-avatar icon="user" shape="square" v-for="(url,uidx) in form4.displayDetail.urlList" :key="uidx" :src="url"
                      style="width: 100px;height: 100px;margin-right: 8px"/>
          </viewer>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--   库存盘点 -->
    <a-form-model v-if='key=="3"' :label-col="labelCol" :modal="form5" :wrapper-col="wrapperCol">
      <a-table
        ref="table"
        :columns="columns"
        :loading="loading"
        :scroll="{x:400,y:240 }"
        :dataSource="dataSource1"
        bordered
        rowKey="id"
        size="middle">
      </a-table>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="备注" style="margin-top: 20px">
          <a-textarea v-model="form5.takeStockDetail.remarks" :disabled="true" allow-clear placeholder="请输入备注"
                      style="width:90%;margin-left:5%;min-height: 80px"/>
          <!--          <span>{{ form5.remarks }}</span>-->
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--竞品采集-->
    <a-form-model v-if='key=="4"' :label-col="labelCol" :modal="form6" :wrapper-col="wrapperCol">
      <a-table
        ref="table"
        :columns="columns2"
        :dataSource="dataSource2"
        :loading="loading"
        :scroll="{x:400,y:240 }"
        bordered
        rowKey="id"
        size="middle">
        <span slot="logo" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <viewer :images="record.logo">
            <a-avatar :src="record.logo" icon="user" shape="square"/>
            </viewer>
          </div>
        </span>
      </a-table>
      <a-form-model-item label="照片" style="margin-left: -290px">
        <viewer :images="form6.competingDetail.imgList">
          <a-avatar v-for="(url,uidx) in form6.competingDetail.imgList" :key="uidx" :src="url"
                    shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
        </viewer>
      </a-form-model-item>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="促销活动说明" style="margin-top: 20px">
          <a-textarea v-model="form6.competingDetail.remarks" :disabled="true" allow-clear placeholder="请输入备注"
                      style="width:90%;margin-left:5%;min-height: 80px;"/>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--   销量采集-->
    <a-form-model v-if='key=="5"' :label-col="labelCol" :modal="form7" :wrapper-col="wrapperCol">
      <a-col :md="8" :sm="24">
        <a-form-model-item label="销售时间">
          <span>{{ form7.salesDetail.salesTime }}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="烟杆销售占比">
          <span>{{ form7.salesDetail.tobaccoMarket }}%</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-model-item label="烟弹销售占比">
          <span>{{ form7.salesDetail.smokeMarket }}%</span>
        </a-form-model-item>
      </a-col>
      <a-table
        ref="table"
        :columns="columns3"
        :dataSource="dataSource3"
        :loading="loading"
        :scroll="{x:400,y:240 }"
        bordered
        rowKey="id"
        size="middle">
      </a-table>
      <a-form-model-item label="照片" style="margin-left: -290px">
        <!--        <j-image-upload v-model='form7.salesDetail.imgList[0]' :disabled="disableSubmit" class="avatar-uploader"-->
        <!--                        text="上传"></j-image-upload>-->
        <viewer :images="form7.salesDetail.imgList">
          <a-avatar v-for="(url,uidx) in form7.salesDetail.imgList" :key="uidx" :src="url"
                    shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
        </viewer>
      </a-form-model-item>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="备注" style="margin-top: 20px">
          <a-textarea v-model="form7.salesDetail.remarks" :disabled="true" allow-clear placeholder="请输入备注"
                      style="width:90%;margin-left:5%;min-height: 80px"/>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--    资产管理-->
    <a-form-model v-if='key=="6"' :label-col="labelCol" :modal="form8" :wrapper-col="wrapperCol">
      <a-col :md="12" :sm="24">
        <a-form-model-item label="是否有资产">
          <span>{{ form8.moneyDetail.isAssetsStr}}</span>
        </a-form-model-item>
      </a-col>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="A类陈列位置">
          <span>{{ form8.moneyDetail.isClassDisplayStr=='是'?'是':'否'}}</span>
        </a-form-model-item>
      </a-col>
      <a-table
        ref="table"
        :columns="columns4"
        :loading="loading"
        :dataSource="dataSource4"
        :scroll="{x:400,y:240 }"
        bordered
        rowKey="id"
        size="middle">
      </a-table>

      <a-form-model-item label="照片" style="margin-left: -290px">
        <viewer :images="form8.imgList">
          <a-avatar v-for="(url,uidx) in form8.imgList" :key="uidx" :src="url"
                    shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
        </viewer>
      </a-form-model-item>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="备注" style="margin-top: 20px">
          <a-textarea v-model="form8.moneyDetail.remarks" :disabled="true" allow-clear placeholder="请输入备注"
                      style="width:90%;margin-left:5%;min-height: 80px"/>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--    知识宣讲-->
    <a-form-model v-if='key=="7"' :label-col="labelCol" :modal="form9" :wrapper-col="wrapperCol">
      <a-form-model-item label="是否宣讲" style="margin-left: -290px">
        <span>{{ form9.knowLedgeDetail.isKnowledge ? '是' : '否' }}</span>
      </a-form-model-item>
      <a-form-model-item label="照片" style="margin-left: -290px">
        <!--        <j-image-upload v-model='form9.knowLedgeDetail.imgList[0]' :disabled="disableSubmit" class="avatar-uploader"-->
        <!--                        text="上传"></j-image-upload>-->
        <viewer :images="form9.knowLedgeDetail.imgList">
          <a-avatar v-for="(url,uidx) in form9.knowLedgeDetail.imgList" :key="uidx" :src="url"
                    shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
        </viewer>
      </a-form-model-item>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="备注" style="margin-top: 20px">
          <a-textarea v-model="form9.knowLedgeDetail.remarks" :disabled="true" allow-clear placeholder="请输入备注"
                      style="width:90%;margin-left:5%;min-height: 80px"/>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--    建议反馈-->
    <a-form-model v-if='key=="8"' :label-col="labelCol" :modal="form10" :wrapper-col="wrapperCol">
      <a-form-model-item label="反馈类型" style="margin-left: -290px">
        <span>{{ form10.suggestDetail.feedbackTypeStr }}</span>
      </a-form-model-item>
      <a-form-model-item label="附件" style="margin-left: -290px">
        <!--        <j-image-upload v-model='form10.suggestDetail.urls[0]' :disabled="disableSubmit" class="avatar-uploader"-->
        <!--                        text="上传"></j-image-upload>-->
        <viewer :images="form10.suggestDetail.urls">
          <a-avatar v-for="(url,uidx) in form10.suggestDetail.urls" :key="uidx" :src="url"
                    shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
        </viewer>
      </a-form-model-item>
      <a-form-model-item label="联系方式" style="margin-left: -290px">
        <span>{{ form10.suggestDetail.phone }}</span>
      </a-form-model-item>
      <a-col :md="12" :sm="24">
        <a-form-model-item label="建议反馈">
          <a-textarea v-model="form10.suggestDetail.content" :disabled="true" allow-clear placeholder="请输入"
                      style="width:90%;margin-left:5%;min-height: 80px"/>
        </a-form-model-item>
      </a-col>
    </a-form-model>
    <!--    离店打卡-->
    <div v-if='key==="9"'>
      <a-form-model :label-col="labelCol" :model="form11" :wrapper-col="wrapperCol">
        <a-col :md="12" :sm="24">
          <a-form-model-item label="离店时间">
            <span>{{ form11.outPunchDetail.visitOutTime }}</span>
          </a-form-model-item>
        </a-col>
        <!--        <a-col :md='12' :sm='24'>-->
        <!--          <a-form-model-item label='离店地址'>-->
        <!--            <span>111</span>-->
        <!--          </a-form-model-item>-->
        <!--        </a-col>-->
        <a-col :md="12" :sm="24">
          <a-form-model-item label="离店打卡图片">
            <!--            <j-image-upload v-model='form11.outPunchDetail.outUrl' :disabled='disableSubmit'-->
            <!--                            class='avatar-uploader' text='上传'></j-image-upload>-->
            <viewer :images="form11.outPunchDetail.outUrl">
              <a-avatar v-for="(url,uidx) in form11.outPunchDetail.outUrl" :key="uidx" :src="url"
                        shape="square" style="width: 100px;height: 100px;margin-right: 8px"/>
            </viewer>
          </a-form-model-item>
        </a-col>
      </a-form-model>
    </div>
  </j-modal>
</template>

<script>
import JImageUpload from '@/components/cn-form/JImageUpload'
import DisplayActivities from './DisplayActivities'
import ExpenseActivities from './ExpenseActivities'
import JUpload from '@/components/cn-form/JUpload'
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'SfaVisitDetailsReportModal',
  components: { JImageUpload, DisplayActivities, ExpenseActivities, JUpload },
  data() {
    return {
      activekey: '1',
      disPlayImgList: [], //陈列图片
      visible: false,
      form: {},
      forms: {},
      form3: {},
      form4: {},
      form5: {},
      form6: {},
      form7: {},
      form8: {},
      form9: {},
      form10: {},
      form11: {},
      key: '1',
      //库存盘点数据
      dataSource1: [],
      columns: [
        {
          title: '商品编码',
          align: 'center',
          dataIndex: 'productCode'
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'productName'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'basicUnit'
        },
        {
          title: '库存数量',
          align: 'center',
          dataIndex: 'nowNum'
        }
      ],
      //竞品采集数据
      dataSource2: [],
      columns2: [
        {
          title: '竞品编码',
          align: 'center',
          dataIndex: 'competingCode'
        },
        {
          title: '竞品名称',
          align: 'center',
          dataIndex: 'competingName'
        },
        {
          title: '销售数量',
          align: 'center',
          dataIndex: 'num'
        },
        {
          title: '是否有活动',
          align: 'center',
          dataIndex: 'whetherActivity',
          customRender: function (t, r, index) {
            if (t == 1) {
              return '有'
            } else {
              return '无'
            }
          }

        },
        {
          title: '图片',
          align: 'center',
          dataIndex: 'logo',
          scopedSlots: { customRender: 'logo' }

        },
      ],
      //销量表格数据
      dataSource3: [],
      columns3: [
        {
          title: '商品编码',
          align: 'center',
          dataIndex: 'goodsCode'
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'goodsName'
        },
        {
          title: '基本单位',
          align: 'center',
          dataIndex: 'basicUnitStr'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'marketingUnitNum'
        },
        {
          title: '建议零售价',
          align: 'center',
          dataIndex: 'marketingUnitMoney'
        },
        {
          title: '合计',
          align: 'center',
          dataIndex: 'countMoney'
        }
      ],
      //资产管理表格数据
      dataSource4: [],
      columns4: [
        {
          title: '商品编码',
          align: 'center',
          dataIndex: 'goodsCode'
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'goodsName'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'basicUnitStr'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'number'
        }
      ],
      labelCol: {
        xs: { span: 16 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      url: {
        detail: window._CONFIG['domianSfaURL'] + '/small/visit/sfaVisitLineEntity/getType',
        detail2: window._CONFIG['domianSfaURL'] + '/visit/sfaVisitInfoController/getInfo'
      }
    }
  },
  methods: {
    edit(record) {
      // this.form.resetFields()
      // this.model = Object.assign({}, record)
      this.visible = true
      this.form = record
      console.log(this.form)
      if (this.url.detail) {
        let params = {}
        params.id = record.id
        params.visitId = record.visitId
        params.visitDate = record.createDate
        postAction(this.url.detail, params).then(async (res) => {
          if (res.success) {
            this.forms = res.result
            console.log(this.forms)
          } else {
            this.$message.warning(res.message)
          }
        })
      }
      this.cutType('1')
    },
    //列表切换
    cutType(key) {
      this.activekey = key
      getAction(window._CONFIG['domianSfaURL'] + `/visit/sfaVisitInfoController/getInfo?id=${this.form.id.toString()}&type=${key}`).then(async (res) => {
        if (res.success && key === '1') {
          this.form3 = res.result
          this.key = key
          console.log(this.form3)
        }
        if (res.success && key === '2') {
          this.form4 = res.result
          this.key = key
          console.log(this.form4)
        }
        if (res.success && key === '3') {
          this.form5 = res.result
          this.dataSource1 = res.result.takeStockDetail.products
          this.key = key
          console.log(this.form5, this.dataSource1)
        }
        if (res.success && key === '4') {
          this.form6 = res.result
          this.dataSource2 = res.result.competingDetail.detailVoList
          this.key = key
          console.log(this.form6, this.dataSource2)
        }
        if (res.success && key === '5') {
          this.key = key
          this.form7 = res.result
          this.dataSource3 = res.result.salesDetail.goodList
          console.log(this.form7, this.dataSource3)
        }
        if (res.success && key === '6') {
          this.form8 = res.result
          this.dataSource4 = res.result.moneyDetail.assetsDetailsVos
          this.form8.imgList = res.result.moneyDetail.assetsUrlVos.map(item=>item.url)
          this.key = key
          console.log(this.form8, this.dataSource4)
        }
        if (res.success && key === '7') {
          this.form9 = res.result
          this.key = key
          console.log(this.form9)
        }
        if (res.success && key === '8') {
          this.form10 = res.result
          this.key = key
          console.log(this.form10)
        }
        if (res.success && key === '9') {
          this.form11 = res.result
          this.key = key
          console.log(this.form11)
        }
      })
    },
    close() {
      this.visible = false
      this.key = '1'
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>

</style>